<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // this指向常见情况
    // (1)  一般情况下,普通函数this指向window (普通命名函数和匿名函数调用时没有依存的对象 this指向window,严格模式下this->undefined)
    // (2) 函数调用时有依存的对象, 函数调用时属于谁,就指向谁  (a.对象的方法调用 b. 事件)
    // (3) 箭头函数没有自己的this对象，内部的this就是定义时上层作用域(包裹箭头函数的父作用域)中的this => 简单的来说,箭头函数内的this指向依赖于父作用域的this指向(箭头函数中遇到this就向外跳一层找父作用域this指向),如果父作用域也是箭头函数,继续向外跳一层,以此类推,直到跳到全局作用域为止(this->window)


    // 普通函数
    /*  function fn(){
         console.log(this);
     }
     fn();
 
 
     var zhang = {
         name:"张三",
         age:18,
         say:function(){
             console.log(this);
             console.log(this.name,this.age);
         }
     }
     zhang.say();
 
     document.onclick = function(){
         console.log(this);
     } */


    // 单层箭头函数  this-> window
    // var fn = () => {
    //     console.log(111,this);
    // }
    // fn();


    // var zhang = {
    //     name:"张三",
    //     age:18,
    //     say:()=>{
    //         console.log(2222,this);
    //         // console.log(this.name,this.age);
    //     }
    // }
    // zhang.say();

    // document.onclick = ()=>{
    //     console.log(3333,this);
    // }

    // 普通函数嵌套箭头函数 => 依赖于普通函数的this指向

    function fn() {
        console.log(this); // this-> window

        let test = () => {
            console.log(1111, this);  // this-> window
        }
        test();
    }
    fn();


    var zhang = {
        name: "张三",
        age: 18,
        say: function () {
            console.log(this);  // this->zhang
            // console.log(this.name,this.age);

            let test = () => {
                console.log(2222, this);  // this-> zhang
            }
            test();
        }
    }
    zhang.say();

    document.onclick = function () {
        console.log(this);  // this->document

        let test = () => {
            console.log(3333, this);  // this-> document
        }
        test();
    }






</script>

</html>